<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><span style="color: #1f120b">类型管理</span></el-breadcrumb-item>
        </el-breadcrumb>
        <el-card style="margin-top: 4vh">
            <el-row type="flex" align="middle">
                <el-col :span="8" :offset="10">
                    <el-input placeholder="请输入搜索内容" v-model="queryInfo.searchInfo" clearable @clear="getTypeList">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4" :offset="2">
                    <el-button @click="AddType" plain>
                        <i class="el-icon-plus"></i>
                        新增分类
                    </el-button>
                </el-col>
            </el-row>

            <!--           展示所有隐患-->
            <el-table
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    :data="pagetestlist"
                    ref="multipleTable"
                    tooltip-effect="dark"
                    stripe
                    style="width: 100%;margin-top: 4vh"
                    :header-cell-style="{color: '#000000E6'}">
                <el-table-column label="编号" prop="id" sortable align="center"></el-table-column>
                <el-table-column label="类型名" prop="typeName"  align="center">
                    <template slot-scope="scope">
                        <span style="color: #8F2139">
                            <el-tag type="info">{{scope.row.typeName}}</el-tag>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="描述" prop="typeDes" align="center">
                    <template slot-scope="scope">
                        <span style="color: #0a3d62">
                            {{scope.row.typeDes ? scope.row.typeDes : '暂无描述'}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="200px"  fixed="right">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit" type="text" @click="EditType(scope.row)"  style="color: #0a3d62">修改</el-button>
                        <el-button icon="el-icon-delete"  type="text" @click="removeType(scope.row.id)" style="color: red; padding-left: 4px">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--      分页区域-->
            <div class="fenye">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryInfo.pagenum"
                        :page-size="queryInfo.pagesize"
                        layout="total, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
            <div style="height: 20vh"></div>
        </el-card>
        <el-dialog
                title="修改分类名"
                :visible.sync="openEdit"
                width="47.9%" @close="EditDialogClosed">
            <!--      内容主体区域-->
            <el-form :model="editForm" :rules="rules" ref="editFormRef"  status-icon label-width="100px">
                <el-form-item label="新分类名: " required prop="typeName">
                    <el-input v-model="editForm.typeName" placeholder="请输入想修改的分类名"></el-input>
                </el-form-item>
                <el-form-item label="分类描述: " prop="typeDes">
                    <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10}"
                              v-model="editForm.typeDes" placeholder="请输入描述分类话语"></el-input>
                </el-form-item>
            </el-form>
            <!--      底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-row>
                    <el-col :span="4" :offset="5">
                        <el-button type="danger" @click="EditToType()">保 存</el-button>
                    </el-col>
                    <el-col :span="4" :offset="5">
                        <el-button type="danger" plain style="margin-left: 40px" @click="EditDialogClosed()">重 置</el-button>
                    </el-col>
                </el-row>
            </span>
        </el-dialog>

        <el-dialog
                title="添加分类名"
                :visible.sync="toAdd"
                width="47.9%" @close="AddDialogClosed">
            <!--      内容主体区域-->
            <el-form :model="AddForm" :rules="rules" ref="AddFormRef"  status-icon label-width="100px">
                <el-form-item label="分类名: " required prop="typeName">
                    <el-input v-model="AddForm.typeName" placeholder="请输入分类名"></el-input>
                </el-form-item>
                <el-form-item label="分类描述: " prop="typeDes">
                    <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10}"
                              v-model="AddForm.typeDes" placeholder="请输入描述分类话语"></el-input>
                </el-form-item>
            </el-form>
            <!--      底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-row>
                    <el-col :span="4" :offset="5">
                        <el-button type="danger" @click="AddToType()">保 存</el-button>
                    </el-col>
                    <el-col :span="4" :offset="5">
                        <el-button type="danger" plain style="margin-left: 40px" @click="AddDialogClosed()">重 置</el-button>
                    </el-col>
                </el-row>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Type",
        data(){
            return{
                loading:true,
                typeList:[],
                total: 0,
                queryInfo: {
                    // 模糊搜索
                    searchInfo: '',
                    // 当前页数
                    pagenum: 1,
                    pagesize: 5
                },
                editForm:{
                    typeId:'',
                    typeDes:'',
                    typeName:''
                },
                openEdit:false,
                rules: {
                    typeName: [
                        { required: true, message: '请输入您想要修改的分类名称', trigger: 'blur' },
                    ],
                },
                toAdd : false,
                AddForm:{
                    typeName:'',
                    typeDes:''
                }
            }
        },
        created() {
            this.getTypeList()
        },
        methods:{
            async getTypeList(){
                this.loading = true
                const { data: res } = await this.$http.get('/type/')
                console.log(res)
                if (res.code !== 200){
                    this.loading = false
                    return this.WarningMsg(res.msg)
                }
                this.typeList = res.data
                this.total = this.typeList.length
                console.log(this.typeList)
                if(res.data.length == this.typeList.length) {
                    this.loading = false
                }
            },

            // 监听 pagesize 改变的事件
            handleSizeChange (newSize) {
                this.queryInfo.pagesize = newSize
                this.getTypeList()
            },
            // 监听页码值改变的事件
            handleCurrentChange (newPage) {
                // console.log(newPage)
                this.queryInfo.pagenum = newPage
                this.getTypeList()
            },
            EditType(list){
                this.openEdit = true
                this.editForm.typeId = list.id
                this.editForm.typeName = list.typeName
                this.editForm.typeDes = list.typeDes
            },
            async EditToType(){
                console.log(this.editForm)
                const { data: res } = await this.$http.post('/type/updateName/', this.editForm)
                console.log(res)
                if (res.code !== 200) {
                    return this.WarningMsg(res.msg)
                }
                this.$message.success('修改成功!')
                this.openEdit = false
                this.getTypeList()
            },
            AddType(){
              this.toAdd = true
            },
            async AddToType(){
                console.log(this.AddForm)
                const { data: res } = await this.$http.post('/type/add/', this.AddForm)
                console.log(res)
                if (res.code !== 200) {
                    return this.WarningMsg(res.msg)
                }
                this.$message.success('添加成功!')
                this.toAdd = false
                this.getTypeList()
            },
            AddDialogClosed(){
              this.$refs.AddFormRef.resetFields()
            },
            EditDialogClosed () {
                this.$refs.editFormRef.resetFields()
            },
            async removeType (id) {
                const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).catch(err => err)
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                // console.log('确认删除')
                const { data: res } = await this.$http.delete('/type/del/'+id)
                if (res.code !== 200) {
                    return this.WarningMsg(res.msg)
                }
                this.$message.success('删除成功!')
                this.getTypeList()
            },
            WarningMsg(msg) {
                const h = this.$createElement;
                this.$notify.warning({
                    title: '提示',
                    message: h('p', {style: 'color: teal'}, msg),
                    offset: 100,
                    duration: 3000
                });
            },
        },
        computed:{
            pagetestlist: function () {
                var search = this.queryInfo.searchInfo
                if (search) {
                    return this.typeList.filter(function (data) {
                        return Object.keys(data).some(function (key) {
                            return String(data[key]).toLowerCase().indexOf(search) > -1
                        })
                    })
                }
                return this.typeList.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
            }
        }
    }
</script>

<style scoped>
    .fenye{
        float: right;
        margin-top: 30px;
        margin-right: 30px;
    }
</style>
